<template>
  <div class="create">
    <div class="top">
      <router-link :to="{name:'home'}" class="close"><i class="icon-close"></i></router-link>
      <button class="btn-finish" v-on:click="createGroup()">完成</button>
    </div>
    <div class="imgForm">
      <div class="upfile " v-bind:style="{backgroundImage: 'url(' + group.avatar + ')'}">
        <vue-core-image-upload
          class="upfilebtn"
          crop-ratio="1:1"
          crop="local"
          @imageuploaded="imageuploaded"
          :max-file-size="5242880"
          extensions="png,gif,jpeg,jpg"
          :url="uploadUrl"
          :cropBtn="btnTxt"
          compress="50"
          text="">
        </vue-core-image-upload>
        <i class="icon-camera"></i>
      </div>
      <div class="groupname">
        <input type="text" v-model="group.name" placeholder="群组名称">
      </div>
    </div>
    <div class="title">选择所属群组类别(必选)</div>
    <div class="typeForm">
      <label class="opt" v-for="(o,index) in typeopt"><input type="radio" v-model="group.type" v-bind:value="index+1"><span class="val">{{o}}</span></label>
    </div>

    <div class="descForm">
      <textarea placeholder="群组介绍（选填）" v-model="group.intro"></textarea>
    </div>
  </div>
</template>

<script>
  import VueCoreImageUpload from 'vue-core-image-upload'
  import $config from './../assets/js/config'

  export default {
    name: 'home',
    components: {
      'vue-core-image-upload': VueCoreImageUpload,
    },
    data () {
      return {
        typeopt:['科技','教育','文艺','生活','娱乐','健康','时尚','经济'],
        uploadUrl: '',
        btnTxt:{
          ok:'上传',
          cancel:'取消'
        },
        group: {
          avatar: 'https://file.xiaomiquan.com/201707/98d3ac5c22bc4a2999280a7d2229cdca3ae6e3a70fdc0a2127b176887feb968b.jpg',
          name: '',
          type: 1,
          intro:'',
          creator:$config.user.uid,
          owner:$config.user.uid
        },
      }
    },
    mounted (){
      this.getUploadUrl();
    },
    methods: {
      getUploadUrl() {
        this.$http.get($config.host + '/api.php?s=/Attach/assignUppicUrl').then(response => {
          this.uploadUrl = response.body.data.url;
        });
      },
      imageuploaded(res) {
        console.log(res);
        if(res){
          this.group.avatar = res.url;
        }
        this.getUploadUrl();
      },
      createGroup: function() {
        var _this = this;

        if(this.group.name == ""){
          alert('请填写群组名称');
          return;
        }else if(this.group.avatar == ""){
          alert('请选择群组头像');
          return;
        }

        this.$http.post($config.host + '/api.php?s=/Group/Create',_this.group).then(response => {
          // get body data
          console.log(response.body);
          alert('群组ID是'+response.body.data[0]);
        }, response => {
          // error callback
        });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .g-core-image-upload-form{width:auto !important; height:auto !important;}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../assets/css/common.scss";

  .create {
    .top{@include border-half-all($border,'bottom'); height:rem(90); background:#fff; padding:0 rem(17); line-height:rem(90); margin-bottom: rem(54);
      .close{
        width:rem(50); height:rem(50); text-align:center; display:inline-block; margin-top:rem(18);
        .icon-close{color:$blue; vertical-align:rem(15);}
      }
      .btn-finish{float:right; border:none; width:rem(114); height:rem(54); margin-top:rem(20); line-height:rem(54); text-align:center; background:$blue; border-radius:4px; font-size:rem(26); color:#fff; vertical-align:middle;}
    }

    .imgForm{border-radius:10px; background:#fff; margin:0 rem(55) rem(68); overflow:hidden; position:relative;
      &:before{@include border-half($border-light,'border');}
      .upfile{float:left; width:rem(180); height:rem(180); position:relative; background-size: cover;
        .upfilebtn{position:relative; float:left; width:rem(180); height:rem(180); overflow:hidden;}
        .icon-camera{position:absolute; width:rem(40); height:rem(40); background: rgba(0,0,0,0.10); line-height:rem(40); text-align:center; border-radius:100px; color:#fff;
          right:rem(10); top:rem(10); font-size:rem(22);
        }
      }
      .groupname{
        margin-left:rem(180); padding-right:rem(40);
        input{width:100%; height:rem(180); text-indent:rem(38); font-size:rem(32); border:none; outline:0;}
      }
    }

    .title{font-size:rem(28); color:$black-light; margin-bottom: rem(36); text-align:center;}
    .typeForm{text-align: center; padding:0 rem(55); overflow:hidden; margin-bottom:rem(47);
      .opt{float:left; width:rem(140); height:rem(60); line-height:rem(60); margin-right:rem(26); margin-bottom:rem(30);
        .val{display:block; font-size:rem(28); border-radius:100px; position:relative; color:$black-light;
          &:before{@include border-half($black-light,'border'); border-radius:100px;}
        }
        input{display:none;
          &:checked + .val{color:$black-dark;
            &:before{@include border-half($black-dark,'border'); border-radius:100px;}
          }
        }
        &:nth-child(4n){margin-right:0;}
      }
    }

    .descForm{margin-left:rem(51); margin-right:rem(59); height:rem(300); border-radius:rem(10); position:relative; overflow:hidden; background:#fff; padding:rem(18) rem(29);
      textarea{border:none; width:100%; height:100%; resize:none; font-size:rem(32); font-family: inherit;}
      &:before{@include border-half($border-light,'border');}
    }
  }
</style>
